<!DOCTYPE html>
<html>
<body>
	<div id="page" data-role="page" data-theme="b">
		<div data-role="header" data-theme="b" style="margin-bottom: 10px">
			<h1> Performance / Paging</h1>
			<a href="../indexhtml.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		</div>
		<!-- HTML table Definition -->
		<table id='grid'></table>
		<div id='pager'></div>
		<!-- Java Scruipt Code -->
		<script type='text/javascript'>
		jQuery('#grid').jqGrid({
			"hoverrows":false,
			"viewrecords":true,
			"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
			"gridview":true,
			"url":"data.json",
			"loadonce": true,
			"rowNum":10,
			"height":200,
			"autowidth":true,
			"sortname":"OrderID",
			"rowList":[10,30,40],
			"datatype":"json",
			"colModel":[
				{"name":"OrderID","index":"OrderID","sorttype":"int","key":true,"editable":true},
				{"name":"OrderDate","index":"OrderDate","sorttype":"datetime","formatter":"date","formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"},"search":false,"editable":true},
				{"name":"ShipName","index":"ShipName","sorttype":"string","classes":"ui-ellipsis","editable":true}
			],
			"pager":"#pager"
		});
		setTimeout(function() {
			SyntaxHighlighter.highlight({useScriptTags:false}, '')},
		100);
		</script>
		
		<div class="collapses" data-theme="b" data-role="collapsible">
			<h3>View Code</h3>
<pre>
	<!-- HTML Definition -->

	&lt;div id="page" data-role="page" data-theme="b">
    ...
		&lt;table id='grid'&gt;&lt;/table&gt;
		&lt;div id='pager'&gt;&lt;/div&gt;

		<!-- Java Script Code -->

		&lt;script type='text/javascript'&gt;
		jQuery('#grid').jqGrid({
			hoverrows:false,
			"viewrecords":true,
			"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
			"gridview":true,
			"url":"data.json",
			"loadonce": true,
			"rowNum":10,
			"height":200,
			"autowidth":true,
			"sortname":"OrderID",
			"rowList":[10,30,40],
			"datatype":"json",
			"colModel":[
				{"name":"OrderID","index":"OrderID","sorttype":"int","key":true,"editable":true},
				{"name":"OrderDate","index":"OrderDate","sorttype":"datetime","formatter":"date",
					"formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"},
					"search":false,"editable":true
				},
				{"name":"ShipName","index":"ShipName","sorttype":"string","classes":"ui-ellipsis","editable":true}
			],
			"pager":"#pager"
		});
		// Toolbar searching
		jQuery('#grid').jqGrid('filterToolbar',{"stringResult":true});
		...
		&lt;/script&gt;
	&lt;/div&gt;
</pre>
		</div>
	</div>
</body>
</html>